@import '../../style/them.scss';
@import "../../style/iconfont";

.navigation-container {
  //background: $bg;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20rpx);
  position: fixed;
  width: 100%;
  z-index: 99;
  top: 0;
  left: 0;
  right: 0;

  .navigation-bar {
    display: flex;
    justify-content: center;
    align-items: center;

    .btn-box {
      display: flex;
      align-items: center;
      position: absolute;
      left: 20rpx;
      width: 160rpx;
      height: 58rpx;
      background: rgba(255, 255, 255, 0.75);
      border: 2rpx solid rgba(0, 0, 0, 0.1);
      box-shadow: $shadow;
      border-radius: 40rpx;

      .iconfont {
        width: 80rpx;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;

        &:active {
          opacity: 0.4;
        }

      }
      .index {
        border-left: 1rpx solid rgba(0,0,0,.15);
      }

    }

    .navigation-title {
      display: flex;
      align-items: center;

      .title {
        font-family: "Microsoft YaHei UI Light";
        font-size: 30rpx;
        font-weight: bold;
        letter-spacing: 4rpx;
        opacity: 0.8;
      }
    }

  }

}
.blank {
  width: 100vw;
  background: $bg;
}